<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <title>申请客户经理</title>
    <link href="${ctx}/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="${ctx}/assets/css/weixing.css" rel="stylesheet"/>
    <link href="${ctx}/assets/css/sco.message.css" rel="stylesheet"/>
    <style>
		/* autocomplete */
		div.ac {border: 1px solid #ccc;position: absolute;display: none;overflow: auto;background-color: #ffffff;z-index:998;}
		div.ac > ul {margin-top:10px;padding:0;}
		div.ac > ul > li {height:33px;line-height:33px;cursor:pointer;}
		div.ac > ul > li:hover{background:#eee;}
		div.ac > ul > li > div span {padding-left:15px;}
		div.ac > ul > li > div span em {color:red;font-style: normal;}
	</style>
  </head>
  <body>
  	<form id="submit_form" action="${ctx}/wx/v1/ConsumerManager/applyPost" method="post">
  		<input type="hidden" name="wxuser" value="${wxuser}">
		<input type="hidden" id="lng" name="longitude">
		<input type="hidden" id="lat" name="latitude">
				
	  	<div class="form-group">
	  		<div class="form-wa">
	  			<p><a style="color:#FF0000;">*</a><b>工作地点</b></p>
	  			<p><b>（以后该地点将作为代客户下单的默认地点）</b></p>
				<input name="place" id="place" class="form-control floating-label" type="text" placeholder="工作地点定位中...">
			</div>
		</div>
		<div class="form-group"  class="form-wa">
			<div class="form-wa">
	  			<p><a style="color:#FF0000;">*</a><b>姓名</b></p>
				<input name="name" id="name" class="form-control floating-label" type="text" placeholder="">
			</div>
		</div>
		<div class="form-group"  class="form-wa">
			<div class="form-wa">
	  			<p><a style="color:#FF0000;">*</a><b>电话号码</b></p>
				<input name="phone" id="phone" class="form-control floating-label" type="text" placeholder="">
			</div>
		</div>
		<div class="form-group"  class="form-wa">
			<div class="form-wa">
	  			<p><a style="color:#FF0000;">*</a><b>公司</b></p>
				<select class="form-control" id="companyId" name="companyId"/>
            		<option value="">--请选择--</option>
            	</select>
			</div>
		</div>
		
		<div class="form-group"  class="form-wa">
			<div class="form-wa">
	  			<p><b>身份证</b></p>
				<input name="idCard" id="idCard" class="form-control floating-label" type="text" placeholder="">
			</div>
		</div>
		<div class="form-group"  class="form-wa">
			<div class="form-wa">
	  			<p><b>工号</b></p>
				<input name="jobNumber" id="jobNumber" class="form-control floating-label" type="text" placeholder="">
			</div>
		</div>
		<div class="form-group"  class="form-wa">
			<div class="form-wa">
	  			<p><b>个人说明</b></p>
	  			<textarea name="personalInfo" id="personalInfo" class="form-control" rows="3" placeholder=""></textarea>
			</div>
		</div>
		<div class="denglu">
			<button id="submit_button" type="button" class="btn btn-default btn-block" style="color:#ffffff">提交</button>
		</div>
	</form>
	
    <script src="${ctx}/assets/js/jquery-1.11.0.min.js"></script>
    <script src="${ctx}/assets/js/bootstrap.min.js"></script>
    <script src="${ctx}/assets/js/sco.message.js"></script>
	<script src="${ctx}/assets/js/idcardvalid.js" type="text/javascript"></script>
	<script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
    <script type="text/javascript">
		
		$(function () {
		
			//位置获取
			var city;
			navigator.geolocation.getCurrentPosition(function (position) {
			
			    var coords = position.coords;
			    
			    var loc = coords.latitude+','+coords.longitude;
			
				$("#lat").val(coords.latitude);  
				$("#lng").val(coords.longitude);          
			
			    var param = {ak:'0Bf0928e769210fd88e064cd0cdf84d8',location:loc,output:'json',pois:0,coordtype:'wgs84ll'};
			    
				$.ajax({
					url:"https://api.map.baidu.com/geocoder/v2/",
					type:"GET",
					async:false,
					dataType:'jsonp',
					jsonp:'callback',
					data:param,
					success:function(resp){
						if(null!=resp && ""!=resp && resp.status == 0){
							city=resp.result.addressComponent.city;
							var addressComponent = resp.result.addressComponent;
							var address =addressComponent.district + addressComponent.street +	addressComponent.street_number;				
							$("#place").val(address);
						}
					}
				});
			
			},function(error){
			    switch(error.code) {
			        case error.TIMEOUT:
			        	$.scojs_message("定位超时，请刷新重试。", $.scojs_message.TYPE_ERROR);
			        	$("#place").attr('placeholder','定位失败，请输入地址');
			          	break;
			        case error.POSITION_UNAVAILABLE:
			        	$.scojs_message("未能获取到位置信息，请稍后再试。", $.scojs_message.TYPE_ERROR);
			            break;
			        case error.PERMISSION_DENIED:
			        	$.scojs_message("请先允许定位。", $.scojs_message.TYPE_ERROR);
			            break;
			        case error.UNKNOWN_ERROR:
			        	$.scojs_message("未知错误。", $.scojs_message.TYPE_ERROR);
			            break;
			    }
			},{enableHighAccuracy:true,timeout:5000,maximumAge:30000});
			
			
			$('#place').AutoComplete({
			    'data': '${ctx}/wx/v1/getAddress',
				ajaxDataType: 'json',
				ajaxParams:function(keyword){
					return {'city':city};
				},
			    'width': 'auto',
			    'async': true,
			    'listStyle': 'custom',
			    'emphasis': false,
			    'matchHandler': function(keyword, data){
			        return true;
			    },
			    'createItemHandler': function(index, data){
			    	return "<span>"+data.name+"</span>";
			    },
			    'afterSelectedHandler': function(data){
			    	$('#place').val(data.name);
			    	$('#lng').val(data.lng);
			    	$('#lat').val(data.lat);
			    }
			}).AutoComplete('show');
			
			//加载公司
			$.get('${ctx}/wx/v1/ConsumerManager/applyCompanys',{},function(data){
				if(null!=data &&　data.length>0){
					$("#companyId").html("");
					$("#companyId").append("<option value=''>--请选择--</option>");
					$(data).each(function(index,element){
    					var content="<option value='"+element.id+"'>";
						
						content+=element.abbreviation;
						
						content+="</option>";
						
						$("#companyId").append(content);
					});
				}
			});
	
			//提交
			$("#submit_button").click(function(){
				if($.trim($("#place").val()).length==0 || !$("#lng").val() || !$("#lat").val()){
					$.scojs_message("请填写工作地点。", $.scojs_message.TYPE_ERROR);
					return;
				}
				
				if($.trim($("#name").val()).length==0){
					$.scojs_message("请填写姓名。", $.scojs_message.TYPE_ERROR);
					return;
				}
				
				var isphone=/^\+?\d{3,13}(\-?(\d{6,8}?))?(\-?(\d{4,8}?))*$/; 
				if (!isphone.test($("#phone").val())){
					$.scojs_message("请填写正确的电话号码。", $.scojs_message.TYPE_ERROR);
					return;
				}
				
				if($("#companyId").val()==""){
					$.scojs_message("请选择公司。", $.scojs_message.TYPE_ERROR);
					return;
				}
				
				//var idCard=$("#idCard").val();
		    	//var idcardResult=IdCardValidate(idCard);
		    	//if(!idcardResult){
		    		//alert("请填写正确的身份证号");
		    		//return;
		    	//}
				
			    $(this).attr("disabled",true);
			    
			    var formObj=$("#submit_form").serialize();
			    $.post($("#submit_form").attr("action"),formObj,function(result){
			    	if(result.success){
			    		$.scojs_message("申请资料已提交，请等待审核。", $.scojs_message.TYPE_OK);
			    	}
			    	else{
			    		$.scojs_message(result.message, $.scojs_message.TYPE_ERROR);
			    		$("#submit_button").attr("disabled",false);
			    	}
			    });
			});
			
		});
	</script>
  </body>
</html>
